<template>
  <div class="shop-detail">
    <van-nav-bar
        title="详情"
        left-text="返回" 
        left-arrow
        @click-left="onClickLeft"  
    /> 
    <!-- <van-swipe class="banner" :autoplay="5000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in bannerArr" :key="index">
            <van-image
                v-if="item.upload_type='img'"
                width="100%"
                height="100%"
                :src="item.banner_pic"
            />
            <video
            v-if="item.upload_type='video'"
                :src="item.banner_pic"
                controls
                accept="video/*"
                id="video">您的浏览器不支持 video 标签。</video>
        </van-swipe-item> 
    </van-swipe> -->
    <div class="banner">
        <van-image 
            width="100%"
            height="100%" 
            :src="itemData.img_url"
        />
    </div>

    <div class="sign-up">
      <div class="enrolment">
        <p>
            {{itemData.title}}
            <!-- <span>拼团</span> -->
        </p>
        <p style="color:#666;font-size:.373333rem;margin:.133333rem 0;">
            {{itemData.desc}} 
        </p>
        <div class="price-box">  
            <div class="num clear-both">
                <p class="float-left">订阅数：{{itemData.play_num+itemData.sys_play_num}}</p>
                
            </div>  
        </div> 
      </div>
    </div>  
    <div class="detail">
        <van-tabs v-model="tabsActive" color="#1989FA">
            <van-tab title="课程详情">
                <div class="detail_content" v-html="itemData.content"></div>
            </van-tab>
            <van-tab title="课程目录">
                <div class="directory_box">
                    <div class="list" v-for="(aItem,bItem) in itemData.subject_list" :key="bItem" @click.stop="lookDetail(aItem)">
                        <div class=" directory_item">
                            <p class="title">{{aItem.title}}</p>
                            <p class="time">{{aItem.start_time | formatDate}}</p>
                        </div>
                        <div class="directory_btn text-right">
                            <van-button round  size="small"  v-if="aItem.start_time*1000-900000 >= newDateTime">即将直播</van-button>
                            <van-button round type="info"  size="small" v-if="aItem.start_time*1000 <= newDateTime&&newDateTime<= aItem.end_time*1000"  @click.stop="pushLive(aItem,'play')" >直播中</van-button>
                            <van-button round type="info"  size="small" v-if="aItem.end_time*1000 <= newDateTime"  @click.stop="pushLive(aItem)" >查看回放</van-button>
                        </div>
                    </div>
                </div>
            </van-tab> 
        </van-tabs> 
      
    </div>

    <div class="btn">
        <div class="btn_item" v-if="itemData.is_reserve==2">
            <a class="sign-up-btn" @click.stop="subscribe ()">立即订阅</a>
        </div>
        <div class="btn_item already" v-if="itemData.is_reserve==1">
            <a class="sign-up-btn">已订阅</a>
        </div>
        <!-- <div class="btn_item">
            <a class="invited-btn">邀请好友</a>
        </div>  -->
    </div>
  </div>
</template>

<script>
import * as api from './../../api/api'
import nError from './../tpl/error'
import menuTpl from './../tpl/menuTpl'
export default {
    data(){
      return{
            userInfo:{},
            section_id:'',
            itemData:{},
            bannerArr:[],
            tabsActive:0,
            newDateTime:new Date().getTime(),
      }
    },
    watch:{
        '$route'(to,from){   
            if(to.path=='/shopPageDetail'){
                this.initData();
            }
        }
    },
    created(){ 
        this.userInfo=sessionStorage.getItem('userInfo')?JSON.parse(sessionStorage.getItem('userInfo')):{}; 
        this.initData();
    },
    methods:{
        onClickLeft(){
            this.$router.go(-1);
        },
        initData(){
            this.section_id=this.$route.query.section_id;  
            if(!this.$route.query.section_id){
                this.$notify({ type: 'danger', message: '商品id为空' });
                this.$router.go(-1);
            }else{
                this.getDataDetail();
                this.itemData={};
            } 
        },
        getDataDetail(){
            let vm = this;
            api.fetchSectionDetail({section_id:vm.section_id,open_id:this.userInfo.wx_open_id}).then(res=>{
                if(res.data.code==200){
                    vm.itemData=res.data.data;
                    vm.bannerArr=res.data.data.banner_pic?JSON.parse(res.data.data.banner_pic):[]
                } 
            })
        },
        //报名
        subscribe (){
            api.postSectionReserve({open_id:this.userInfo.wx_open_id,section_id:this.section_id}).then(res=>{
                if(res.data.code==200){
                    this.itemData.is_reserve=1;
                    this.itemData.play_num++;
                }
            })
        },
        lookDetail(item){ 
            if(item.id){
              this.$router.push({ name: 'liveDetail',query:{subject_id:item.id} });   
            } 
        },
        //进入直播间
        pushLive(item,type){
            if(item.end_time*1000 <= new Date().getTime()){ 
                if(item.replay_url){
                    window.location.href=item.replay_url;  
                }else{
                    this.$dialog.alert({
                        message: '已结束，请稍后查看回放'
                    }); 
                } 
            } else {
                let body={
                    open_id:this.userInfo.wx_open_id,
                    subject_id:type=='play'?item.id:this.subject_id,
                }
                api.postJsonSubjectPlay({open_id:this.userInfo.wx_open_id,subject_id:this.subject_id}).then(res=>{
                    if(res.data.code==200){
                        window.location.href=item.play_url;
                    }
                }) 
            }
        }, 
    },
    components:{
    }

  }
</script>
<style lang="scss">
    .detail_content{ 
        img{
            width:100% !important;
        }
    }
</style>
<style scoped lang="scss">
  .shop-detail{
    position: relative;
    width: 100%;
    height: auto;
    // padding-top: 7rem;
    padding-bottom:50px;
    .banner{
    //   position: absolute;
    //   top: 0;
      width: 100%;
      height: 7rem;

      img{
        width: 100%;
        height: 100%;
      }
    }

    .sign-up{
      padding: .3rem .5rem;
      background-color: #FFF;

      .enrolment {
        p{
          font-size: .54rem;

          span{
            margin-left: .3rem;
            display: inline-block;
            background: #ebbb40;
            padding: 0 .2rem;
            font-size: .4rem;
            border-radius: .1rem;
          }
        }

        .price-box{
            margin-top: .1rem;
            display: flex;
            align-items: center;
            -webkit-align-items: center;
            justify-content: space-between;
            -webkit-justify-content: space-between; 
            .num{ 
                p{
                    font-size: .4rem;
                    color:#666;
                }
                .date_time{
                    margin-left:.4rem;
                }
            } 
        }
        .count_down_box{
            margin-top: .1rem;
            color:#1989FA;
            span{
                font-weight: bold;
            }
            .van-count-down {
                color: #1989FA !important; 
            }
        }
      }
    }

    .sign-up-time{
      margin-top: .25rem;
      padding: .3rem;
      background: #fff;

      p{font-size: .45rem;color: #7d7d7d}
      span{
        margin-left: .3rem;
        color: #ff9a04;
        font-weight: bolder;
      }

      i{
        padding-top: .2rem;
        font-size: .4rem;
        color: #999;
        font-style: normal;
        display: block;
      }
    }

    .active-info{
      margin-top: .25rem;
      padding: .3rem;
      background-color: #FFF;

      p{
        padding: .3rem 0;
        font-size: .43rem;

        span{
          margin-left: .3rem;
        }
      }
      .border-top{border-top: 1px solid #dadada; }
    }

    .detail{
        margin-top: .25rem;
        padding: .3rem;
        background: #fff; 
        .directory_box{
            width:100%;
            height:auto;
            .list{
                display: flex;
                align-items: center;
                box-sizing: border-box;
                width: 100%;
                padding: 10px;
                overflow: hidden;
                color: #323233;
                font-size: 14px;
                line-height: 24px;
                background-color: #fff;
                border-bottom: .013333rem solid #efefef;
                &:active{
                    opacity: .7;
                }
                .directory_item{
                    flex:1;
                } 
                .directory_btn{
                    flex:0 0 100px;
                }
            }
        }
        

    }

    .btn{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        -webkit-align-items: center;
        justify-content: center;
        -webkit-justify-content: center;
        background: #fff;
        .btn_item{
            flex:1;
            padding:0 5%;
            a{
                width:100%;
                height: 1rem;
                line-height: 1rem;
                margin-left: .2rem; 
                font-size: .4rem;
                border-radius: 1rem;
                display: block;
                text-align: center;
                background: #1989FA;
                color:#fff;
            } 
            .invited-btn{background: #F4B650}
        }
        .already{
            a{
               background:#ccc; 
            } 
        }
        

    }
  }
    #video{
        width:100%;
        height:100%;
    }
    
</style>
